<template>
    <!-- 确认订单信息 -->
    <div class="payInfo ffffff">
        <NavbarBreadcrumb>
            <template v-slot:bread>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ name: 'myOrder' }">我的订单</el-breadcrumb-item>
                    <el-breadcrumb-item>确认订单信息</el-breadcrumb-item>
                </el-breadcrumb>
            </template>
        </NavbarBreadcrumb>
        <!-- <div class="padding15All flexleft">
            <p class="margin-right2">订单生效时间:</p>
             <el-col :span="4">
                <el-date-picker
                    v-model="value1"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
             </el-col>
            <p class="margin-left2">您可以设置订单开始生效时间，即以此时间开始方可使用相关服务</p>
        </div> -->
        <div class="tableMain padding15All">
            <el-table
                ref="multipleTable"
                :data="list"
                tooltip-effect="dark"
                style="width: 100%;height:100%;"
                max-height="200">
                <el-table-column
                    fixed
                    prop="name"
                    label="产品名称"
                    width="">
                </el-table-column>
                <!-- <el-table-column
                    prop="b"
                    label="套餐名称"
                    width="">
                </el-table-column> -->
                <el-table-column
                    prop="num"
                    label="购买个数"
                    width="">
                    <template slot-scope="scope">
                        <el-input v-model="num" size="mini" :min="1" type="number"></el-input>
                    </template>
                </el-table-column>
                <!-- <el-table-column
                    prop="d"
                    label="产品规格"
                    width="">
                </el-table-column> -->
                <el-table-column
                    prop="money"
                    label="标准价格（元）"
                    width="">
                </el-table-column>
                <el-table-column
                    prop="timeliness"
                    label="有效期"
                    width="">
                </el-table-column>
                <!-- <el-table-column
                    prop="e"
                    label="优惠方式"
                    width="">
                </el-table-column> -->
                <el-table-column
                    fixed="right"
                    prop="totalPrice"
                    label="合计价格（元）"
                    width="">
                </el-table-column>
            </el-table>
        </div>
        <div class="flexright padding15All">
            <el-col class="flexcolumn marignTop15" :span="5">
                <div class="desc  padding15All">
                    <el-descriptions :column="1">
                        <el-descriptions-item label="购买方" :labelStyle="{'text-align':'right'}"  :contentStyle="{'justify-content':'flex-end'}">
                            <template v-if="signPayType==0">{{$store.state.user.userInfomsg.userName}}</template>
                            <template v-if="signPayType==1">{{$store.state.user.userInfomsg.enterpriseName}}</template>
                        </el-descriptions-item>
                        <el-descriptions-item label="商品标准价格" :labelStyle="{'text-align':'right'}"  :contentStyle="{'justify-content':'flex-end'}">{{list[0]['money']}}元</el-descriptions-item>
                        <el-descriptions-item label="总金额" :labelStyle="{'text-align':'right'}"  :contentStyle="{'justify-content':'flex-end','color':'red','font-size':'20px'}">{{totalPrice}}元</el-descriptions-item>
                    </el-descriptions>
                </div>
                <div class="deal flexright">
                    <el-checkbox v-model="checked"></el-checkbox>
                    <span>我已阅读，同意此协议</span>
                    <el-link @click="openPrivacyDialog" type="primary"  :underline="false">点此查看协议</el-link>
                </div>
                <div class="btn flexright marignTop15" style="width:100%;">
                    <el-button type="primary" @click="goPay">提交订单</el-button>
                </div>
            </el-col>
        </div>
        <el-dialog title="大鸿签购买协议政策" width="40%" :visible.sync="dialogPrivacyVisible" @close="closePrivacyVisible" v-loading="dialogPrivacyLoading">
            <div slot="footer"></div>
            <div v-html="content" class="scroll"></div>
        </el-dialog>
    </div>
</template>

<script>
import NavbarBreadcrumb from '../components/NavbarBreadcrumb.vue'
import { getPurchaseAgreement } from "@/api";
import { Message } from 'element-ui'
export default {
    components: { NavbarBreadcrumb },
    data(){
        return{
             value1: '',
             input:1,
             checked:false,

             list:[],
             num:1,
             totalPrice:'',

            type:'',
            signPayType:'',
            enterpriseId:'',

            content:'',
            dialogPrivacyVisible: false,
            dialogPrivacyLoading: false,
        }
    },
    mounted(){
        this.list=[this.$route.params]
        if(this.$route.params.num){
            this.num=this.$route.params.num
        }

        this.list[0]['totalPrice']=this.num*this.list[0]['money']*1
        this.totalPrice=this.num*this.list[0]['money']*1

        this.type=this.$route.params.type// 类型0鸿签1增值
        this.signPayType=this.$route.params.signPayType// 类型 0个人1企业
        this.enterpriseId=this.$route.params.enterpriseId//企业id
    },
    watch:{
        num(){
            this.list[0]['totalPrice']=this.num*this.list[0]['money']
            this.totalPrice=this.num*this.list[0]['money']
        }
    },
     methods: {
        openPrivacyDialog(){
            this.dialogPrivacyVisible = true
            this.dialogPrivacyLoading = true
            getPurchaseAgreement().then(res => {
                this.dialogPrivacyLoading = false
                this.$nextTick(()=>{
                    this.content = res.result.data.agreement
                })
            })
        },
        closePrivacyVisible(){
            this.dialogPrivacyVisible = false
        },
        goPay(){
            if(!this.checked){
                Message({
                    message: '请勾选并同意《大鸿签服务协议》《隐私政策》',
                    type: 'warning',
                    duration: 2000
                })
                return false
            }
            this.$router.push({
                name:'pay',
                params:{
                    total:this.totalPrice,
                    num:this.num,
                    id:this.list[0].id,
                    type:this.type,// 0鸿签1增值
                    signPayType:this.signPayType,// 0个人1企业
                    enterpriseId:this.enterpriseId,//企业id
                }
            },()=>{})
        },
    },

}
</script>

<style lang="scss">
.payInfo{
    .el-date-editor.el-input, .el-date-editor.el-input__inner{
        width: 100%;
    }
    .el-input{
        width: 70%;
        
    }
}
</style>

<style lang="scss" scoped>
.payInfo{
    height: 100%;
    .deal{
        width: 100%;
        span{
            color: #999;
            font-size: 14px;
        }
    }
}
</style>